<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <!--  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  -->
  <script src="../assets/flexible/flexible.debug.js"></script>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <title>首页</title>
  <link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="../assets/animate/animate.min.css">
  <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/Goodbeans.css"></head>
<body>

  <header class="header">
    <span class="fa fa-plus"></span>
    <form>
      <input  type="text" placeholder="菜谱，专辑"/> <i class="fa fa-search is"></i>
    </form>
    <span class="fa fa-bell-o"></span>
  </header>

  <div class="swiper-container banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../images/A-1.png"></div>
      <div class="swiper-slide">
        <img src="../images/A-1.png"></div>
      <div class="swiper-slide">
        <img src="../images/A-1.png"></div>
      <div class="swiper-slide">
        <img src="../images/A-1.png"></div>
      <div class="swiper-slide">
        <img src="../images/A-1.png"></div>
      <div class="swiper-slide">
        <img src="../images/A-1.png"></div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" id="swipere"></div>
  </div>
  <nav class="nav">
    <a href="caipu.html">
    <figure>
      <img src="../images/B-1.png">
      <figcaption>看菜谱</figcaption>
    </figure>
    </a>
     <a href="hotactivity.html">
    <figure>
      <img src="../images/B-1.png">
      <figcaption>厨房宝典</figcaption>
    </figure>
    </a>
     <a href="book.html">
    <figure>
      <img src="../images/B-1.png">
      <figcaption>热门活动</figcaption>
    </figure>
    </a>
     <a href="menu.html">
    <figure>
      <img src="../images/B-1.png">
      <figcaption>排行榜</figcaption>
    </figure>
    </a>
     <a href="xiari.html">
    <figure>
      <img src="../images/B-1.png">
      <figcaption>美食大全</figcaption>
    </figure>
  </a>
  </nav>
  <div class="dao">
    <section class="topsect">
      <div>
        <h1>周二蛋炒饭</h1>
        <p>来场剩饭反身战</p>
      </div>
      <div>
        <h1>夏日美白餐</h1>
        <p>吃这些白一些</p>
      </div>
    </section>
    <section class="bottomsect">
      <div>
        <h1>滋补白萝卜</h1>
        <p>健胃润肺清肠毒</p>
      </div>
      <div>
        <span>菜谱分类</span>
        <span>热门专辑</span>
      </div>
    </section>
  </div>
  <!-- main主体 -->
  <main></main>

  <footer class="footer">
    <a href="Goodbeans.html">
      <figure class="figu footgure"> <i class="fa fa-ravelry"></i>
        <figcaption>好豆</figcaption>
      </figure>
    </a>
    <a href="discover.html">
      <figure class="figu">
        <i class="fa fa-compass"></i>
        <figcaption>发现</figcaption>
      </figure>
    </a>
    <a href="square.html">
      <figure class="figu">
        <i class="fa fa-wpexplorer"></i>
        <figcaption>广场</figcaption>
      </figure>
    </a>
    <a href="Mine.html">
      <figure class="figu">
        <i class="fa fa-user-o"></i>
        <figcaption>我的</figcaption>
      </figure>
    </a>
  </footer>
  <script type="text/html" id="list_caidan">
      {{each Main as v}}
         <figure>
            <img src="{{v.imgs}}">
            <figcaption>
              <h1>{{v.h1s}}</h1>
              <p>{{v.ps}}</p>
            </figcaption> 
          </figure>

      {{/each}}
    </script>
  <script src="../assets/JQ/jquery-3.2.1.min.js"></script>
  <script src="../assets/swiper/js/swiper.min.js"></script>
  <script src="../assets/animate/swiper.animate1.0.2.min.js"></script>
  <script src="../assets/template-web.js"></script>
  <script src="../js/Goodbeans.js"></script>
</body>
</html>